<template>
	<view class="content">
		<lxc_nav :text="this.$t('all.f3')" :bacicon="'#fff'" :background='bac'></lxc_nav>
		<view id="box">
			<view class="ba_top">
				<image src="../../static/all/bjl.png" mode=""></image>
			</view>
			<view class="gub_title">
				<view style="width: 100vw;height: 100rpx;">
				</view>
				<text class="assets">{{$t('all.g3')}}</text>
				<text class="assets_right">USDT</text>
				</br>
				<text class="assets_number">9944513.</text>
				<text class="assets_littlenumber">00000</text>
				<view class="operate">
					<view class="operate_left" @click="chongzhi">
						<image src="../../static/my/chongzhi.png" mode=""></image>
						<text>{{$t('all.zhifu')}}</text>
					</view>
					<view class="operate_right" @click="tibi">
						<image src="../../static/my/tibi.png" mode=""></image>
						<text>{{$t('all.extract')}}</text>
					</view>
				</view>
				<view class="lvbi">
					<image src="../../static/my/moner1.png" mode=""></image>
				</view>
			</view>
			<view class="bill">
				<view class="bill_title">
				</view>
				<text class="bill_title_text">{{$t('all.i3')}}</text>
			</view>
			<view class="bill_list">
				<view class="list">
					<view class="list-littlebox">
						<text>{{$t('all.j6')}}</text>
						<text>-128738</text>
					</view>
					<view class="bill_time">
						<text>2021-08-10&nbsp;11:12:5</text>
					</view>
				</view>
				<view class="list">
					<view class="list-littlebox">
						<text>{{$t('all.j6')}}</text>
						<text>128738</text>
					</view>
					<view class="bill_time">
						<text>2021-08-10&nbsp;11:12:5</text>
					</view>
				</view>
				<view class="list">
					<view class="list-littlebox">
						<text>{{$t('all.j6')}}</text>
						<text>128738</text>
					</view>
					<view class="bill_time">
						<text>2021-08-10&nbsp;11:12:5</text>
					</view>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import lxc_nav from '../../components/nav.vue'
	export default {
		components: {
			lxc_nav
		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			// this.scrollTop = e.scrollTop;
			console.log(e.scrollTop);
			if (e.scrollTop > 22) {
				this.bac = {
					backgroundImage: 'linear-gradient(150deg,rgba(25, 137, 250, 1), rgba(18, 174, 255, 1))'
				}
			} else {
				this.bac = {
					backgroundImage: 'linear-gradient(150deg,rgba(25, 137, 250, 0), rgba(18, 174, 255, 0))'
				}
			}
		},
		data() {
			return {
				bac: {
					backgroundImage: 'linear-gradient(150deg,rgba(25, 137, 250, 0), rgba(18, 174, 255, 0))'
				}
			}
		},
		onLoad() {

		},
		methods: {
			// 充值
			chongzhi(){
				uni.navigateTo({
					url: '/pages/my/Recharge'
				});
			},
			tibi(){
				uni.navigateTo({
					url: '/pages/my/money'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.operate{
		height: 62rpx;
		margin-top: 70rpx;
		display: flex;
	}
	.operate_left{
		width: 160rpx;
		height: 60rpx;
		background: #00B4EF;
		border: 1rpx solid #FFFFFF;
		border-radius: 10rpx;
		padding-left: 28rpx;
	}
	.operate_left image{
		width: 36rpx;
		height: 36rpx;
		margin-top: 10rpx;
	}
	.operate_left text{
		display: inline-block;
		height: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 30rpx;
		position: relative;
		top: -8rpx;
		left: 12rpx;
	}
	.operate_right{
		width: 160rpx;
		height: 60rpx;
		background: #0077EF;
		border: 1rpx solid #FFFFFF;
		border-radius: 10rpx;
		margin-left: 20rpx;
		padding-left: 28rpx;
	}
	.operate_right image{
		width: 36rpx;
		height: 36rpx;
		margin-top: 10rpx;
	}
	.operate_right text{
		display: inline-block;
		height: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 30rpx;
		position: relative;
		top: -8rpx;
		left: 12rpx;
	}
	.lvbi{
		width: 88rpx;
		height: 88rpx;
		position: absolute;
		top: 120rpx;
		right: 29rpx;
	}
	.lvbi image{
		width: 100%;
		height: 100%;
	}
	page{
		background-color: #f5f6f8;
	}
	#box {
		position: relative;
		width: 100vw;
	}

	.ba_top {
		position: absolute;
		width: 100vw;
		
	}
	.ba_top image{
		width: 100%;
		height: 402rpx;
	}

	

	.gub_title {
		width: 92vw;
		margin-left: 4vw;
		position: relative;
		height: 250rpx;
	}

	.assets {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 40rpx;
		position: relative;
		top: 14rpx;
	}

	.assets_right {
		display: inline-block;
		padding-left: 9rpx;
		padding-right: 9rpx;
		height: 28rpx;
		background-color: #FFFFFF;
		border-radius: 14rpx;
		display: inline-block;
		top: 12rpx;
		left: 10rpx;
		position: relative;
		text-align: center;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1989FA;
		line-height: 28rpx;
	}

	.assets_number {
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 40rpx;
		position: relative;
		top: 30rpx;
	}

	.assets_littlenumber {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 40rpx;
		position: relative;
		top: 31rpx;
	}

	.bill {
		width: 100vw;
		height: 128rpx;
		background: #E6E6E6;
		margin-top: 180rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}
	.bill_title {
		width: 4rpx;
		height: 28rpx;
		background: #1989FA;
		border-radius: 2rpx;
		display: inline-block;
		margin-top: 30rpx;
		margin-left: 4vw;
	}

	.bill_title_text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 9rpx;
		line-height: 28rpx;
		// background-color: red;
		display: inline-block;
		position: relative;
		top: -4rpx;
	}

	.bill_list {
		width: 100vw;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin-top: -40rpx;
		background-color: #FFFFFF;
		position: relative;
		padding-bottom: 169rpx;
	}

	.list {
		height: 124rpx;
		width: 92vw;
		margin-left: 4vw;
		position: relative;
		border-bottom: 1px solid #E0E0E0;
	}

	.list-littlebox {
		position: relative;
		width: 94vw;
		height: 26rpx;
		line-height: 28rpx;
		top: 28rpx;
	}

	.list-littlebox text:nth-child(1) {
		font-size: 28rpx;
	}
	.list-littlebox text:nth-child(2) {
		font-size: 28rpx;
		position: absolute;
		right: 17rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.listimg {
		height: 15rpx;
		width: 18rpx;
		display: inline-block;
		position: relative;
		top: -2rpx;
		left: 9rpx;
		font-size: 0px;
	}

	.listimg image {
		height: 100%;
		width: 100%;
	}
	// .list-littlebox img{
	// 	height: 14rpx;
	// }
	.bill_time {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 46rpx;
	}
</style>
